<script setup>
import {defineProps, ref} from 'vue';

const props = defineProps({
  timeSlots: {
    type: Array,
    required: true
  },
  selectedTimeSlotId: Number

});

const emit = defineEmits(['select']);

// 选择时间段
const selectSlot = (slot) => {
  if (!slot["isOccupied"]) {
    emit('select', slot);
  }
};
</script>

<template>
  <div class="slot-container">
    <div
        v-for="slot in timeSlots"
        :key="slot.id"
        class="slot"
        :class="{
        selected: slot.id === selectedTimeSlotId,
        occupied: slot['isOccupied']
      }"
        @click="selectSlot(slot)"
    >
      <div>{{ slot.text }}</div>
      <div v-if="slot['isOccupied']" class="occupied-text">已占用</div>
    </div>
  </div>
</template>

<style scoped>
.slot-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  justify-content: flex-start;
}

.slot {
  width: calc(33.33% - 10px); /* 三列布局 */
  min-width: 90px;
  background-color: #f0f0f0;
  color: #333;
  padding: 10px 6px;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;

  font-family: monospace;     /* 等宽字体 */
  white-space: nowrap;        /* 不换行 */
  overflow: hidden;           /* 超出隐藏 */
  text-overflow: ellipsis;    /* 超出显示省略号 */

  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
  border: 2px solid transparent;

  letter-spacing: -1px;
}

.slot.selected {
  background-color: #1890ff;
  color: #fff;
  border-color: #1063c9;
}

.slot.occupied {
  background-color: #fbe5ea;
  color: #999;
  cursor: not-allowed;
  border-color: #e4b3b3;
}

.occupied-text {
  margin-top: 4px;
  font-size: 12px;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
}
</style>
